<template>
  <!-- 用户管理页面 -->
  <div class="user-management">
    <div class="user-list">
      <h2>用户列表</h2>
      <!-- 循环显示用户信息 -->
      <div class="user-item" v-for="(user, index) in users" :key="index">
        <p><b>姓名：</b>{{ user.name }}</p> <!-- 显示用户姓名 -->
        <p><b>年龄：</b>{{ user.age }}</p> <!-- 显示用户年龄 -->
        <p><b>性别：</b>{{ user.gender }}</p> <!-- 显示用户性别 -->
      </div>
    </div>
    <div class="user-form">
      <h2>添加用户</h2>
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="newUser.name" /> <!-- 绑定输入的姓名 -->
      </div>
      <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" v-model="newUser.age" /> <!-- 绑定输入的年龄 -->
      </div>
      <div>
        <label for="gender">性别：</label>
        <select id="gender" v-model="newUser.gender"> <!-- 绑定选择的性别 -->
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <button @click="addUser">添加用户</button> <!-- 点击按钮添加用户 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserManagement',
  data() {
    return {
      // 用户列表数据
      users: [
        { name: '张三', age: 25, gender: '男' },
        { name: '李四', age: 30, gender: '女' },
        { name: '王五', age: 28, gender: '男' }
      ],
      // 新添加用户的信息
      newUser: {
        name: '',
        age: null,
        gender: '男'
      }
    }
  },
  methods: {
    // 添加用户方法
    addUser() {
      if (this.newUser.name && this.newUser.age && this.newUser.gender) {
        // 如果用户信息完整，则将新用户添加到用户列表
        this.users.push({ ...this.newUser });
        // 重置新用户信息
        this.newUser.name = '';
        this.newUser.age = null;
        this.newUser.gender = '男';
      } else {
        // 若信息不完整，弹出警告信息
        alert('请填写完整的用户信息');
      }
    }
  }
}
</script>

<style>
.user-management {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.user-list {
  width: 45%; /* 设置用户列表宽度为45% */
}

.user-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.user-form {
  width: 45%; /* 设置用户表单宽度为45% */
}

.user-form div {
  margin-bottom: 10px;
}

.user-form label {
  margin-right: 10px;
}
</style>